<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 顶部搜索栏 -->
            <div class="px-4 py-3">
                <div class="relative">
                    <input type="text" placeholder="搜索课程、讲师、专栏..." class="w-full bg-gray-100 px-4 py-2 rounded-full pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-search absolute left-4 top-3 text-gray-400"></i>
                </div>
            </div>

            <!-- 分类导航 -->
            <div class="px-4 py-3">
                <div class="flex flex-wrap -mx-2">
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-blue-50 flex items-center justify-center">
                            <i class="fas fa-laptop-code text-blue-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">技术开发</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-purple-50 flex items-center justify-center">
                            <i class="fas fa-chart-line text-purple-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">商业财经</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-green-50 flex items-center justify-center">
                            <i class="fas fa-brain text-green-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">个人成长</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-yellow-50 flex items-center justify-center">
                            <i class="fas fa-palette text-yellow-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">创意设计</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-red-50 flex items-center justify-center">
                            <i class="fas fa-heartbeat text-red-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">健康生活</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="fas fa-language text-indigo-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">语言学习</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-pink-50 flex items-center justify-center">
                            <i class="fas fa-book text-pink-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">文学艺术</p>
                    </div>
                    <div class="w-1/4 px-2 mb-4 text-center">
                        <div class="w-14 h-14 mx-auto rounded-full bg-gray-100 flex items-center justify-center">
                            <i class="fas fa-ellipsis-h text-gray-500 text-xl"></i>
                        </div>
                        <p class="text-xs mt-1">更多分类</p>
                    </div>
                </div>
            </div>

            <!-- 热门话题 -->
            <div class="mb-4">
                <div class="flex items-center px-4 py-2">
                    <h2 class="text-lg font-bold">热门话题</h2>
                </div>
                <div class="px-4 overflow-x-auto flex -mx-4 px-4 pb-2">
                    <div class="px-2 flex-shrink-0">
                        <div class="rounded-xl overflow-hidden relative w-40 h-24">
                            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="团队合作" class="absolute w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2">
                                <p class="text-white text-sm font-medium">团队协作</p>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 flex-shrink-0">
                        <div class="rounded-xl overflow-hidden relative w-40 h-24">
                            <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="效率提升" class="absolute w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2">
                                <p class="text-white text-sm font-medium">效率提升</p>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 flex-shrink-0">
                        <div class="rounded-xl overflow-hidden relative w-40 h-24">
                            <img src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="创业指南" class="absolute w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2">
                                <p class="text-white text-sm font-medium">创业指南</p>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 flex-shrink-0">
                        <div class="rounded-xl overflow-hidden relative w-40 h-24">
                            <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="心理健康" class="absolute w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2">
                                <p class="text-white text-sm font-medium">心理健康</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分类切换 -->
            <div class="bg-white px-4 py-3 border-b border-gray-200">
                <div class="flex space-x-6 overflow-x-auto">
                    <button class="text-blue-500 font-medium text-sm pb-2 border-b-2 border-blue-500 whitespace-nowrap">推荐</button>
                    <button class="text-gray-500 text-sm pb-2 whitespace-nowrap">最新</button>
                    <button class="text-gray-500 text-sm pb-2 whitespace-nowrap">热门</button>
                    <button class="text-gray-500 text-sm pb-2 whitespace-nowrap">技术</button>
                    <button class="text-gray-500 text-sm pb-2 whitespace-nowrap">商业</button>
                    <button class="text-gray-500 text-sm pb-2 whitespace-nowrap">成长</button>
                </div>
            </div>

            <!-- 推荐内容列表 -->
            <div class="px-4 py-3">
                <!-- 内容项1 -->
                <div class="mb-6">
                    <div class="course-card">
                        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="领导力课程" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="vip-badge mr-2">VIP</span>
                                <span class="badge">领导力</span>
                            </div>
                            <h3 class="course-title">现代企业领导力提升训练营</h3>
                            <p class="course-author">孙总监 · 企业培训师</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="course-stats">
                                    <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 32课时</span>
                                    <span><i class="fas fa-user mr-1"></i> 1.6万人学习</span>
                                </div>
                                <span class="text-blue-500 font-medium text-sm">¥299</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 内容项2 -->
                <div class="mb-6">
                    <div class="course-card">
                        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="编程课程" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="vip-badge mr-2">VIP</span>
                                <span class="badge">编程</span>
                            </div>
                            <h3 class="course-title">Python数据分析实战</h3>
                            <p class="course-author">刘老师 · 资深工程师</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="course-stats">
                                    <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 45课时</span>
                                    <span><i class="fas fa-user mr-1"></i> 2.8万人学习</span>
                                </div>
                                <span class="text-blue-500 font-medium text-sm">¥399</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 内容项3 -->
                <div class="mb-6">
                    <div class="course-card">
                        <img src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="演讲课程" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="badge">演讲</span>
                            </div>
                            <h3 class="course-title">专业演讲与公众表达</h3>
                            <p class="course-author">张导师 · 演讲专家</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="course-stats">
                                    <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 28课时</span>
                                    <span><i class="fas fa-user mr-1"></i> 9.5千人学习</span>
                                </div>
                                <span class="text-blue-500 font-medium text-sm">¥199</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-bar-item active">
                <i class="tab-icon fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-graduation-cap"></i>
                <span>学习</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-crown"></i>
                <span>会员</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 